<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="承运商" prop="companyName">
            <el-input
                v-model="queryParams.companyName"
                placeholder="请输入承运商名称"
                clearable
            />
        </el-form-item>
        <el-form-item label="发布状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" style=" width:165px;margin-left: 20px"  clearable>
                <el-option v-for="item in Enmu.transportStatus" :key="item.id" :label="item.name"
                    :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="始发地" prop="originPlace">
          <provice-select @changeValue="queryStartChangeValue"></provice-select>
        </el-form-item>
        <el-form-item label="目的地" prop="endProvince">
          <provice-select @changeValue="queryEndChangeValue"></provice-select>
      </el-form-item>
        <el-form-item label="车型" prop="vehicleType">
            <el-select v-model="queryParams.vehicleType" placeholder="请选择车型" style=" width:165px;margin-left: 20px"  clearable>
                <el-option v-for="item in Enmu.carType" :key="item.id" :label="item.name"
                    :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker clearable
            v-model="queryParams.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker clearable
            v-model="queryParams.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="tagList">
        <el-table-column label="用户" align="center" prop="nickName">
          <template slot-scope="{row}">
            <span>{{row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center" prop="phoneNumber">
          <template slot-scope="{row}">
            <span>{{row.phoneNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="承运商名称" align="center" prop="companyName">
          <template slot-scope="{row}">
            <span>{{row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否企业认证" align="center">
            <template slot-scope="{row}">
                <span>{{ row.isApproved == '1' ? '是' : '否' }}</span>
            </template>
        </el-table-column>
        <el-table-column label="出发城市" align="center">
            <template slot-scope="{row}">
              <span>{{fomatterAdressName(row.startProvince) }} / {{ fomatterAdressName(row.startCity) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="到达城市" align="center">
            <template slot-scope="{row}">
              <span>{{ fomatterAdressName(row.endProvince) }} / {{ fomatterAdressName(row.endCity) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center">
          <template slot-scope="scope">
            <span>{{ forrmatterEnmu(Enmu.transportStatus, scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预计最低价" align="center" prop="expectedMinPrice"></el-table-column>
        <el-table-column label="预计最高价" align="center" prop="expectedMaxPrice"></el-table-column>
        <el-table-column label="车型" align="center" prop="vehicleType">
            <template slot-scope="{row}">
                {{forrmatterEnmu(Enmu.carType, row.vehicleType)}}
            </template>
        </el-table-column>
        <el-table-column label="需要车数量" align="center" prop="quantity" />
        <el-table-column label="预计起止时间" align="center" width="200">
            <template slot-scope="{row}">
                <span>{{ row.expectedStartTime }} - {{ row.expectedArrivalTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="queryQuotation(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 添加或修改标签管理对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <div class="info-content">
          <div class="info-title">基本信息</div>
          <!-- 基本信息 -->
          <div class="base-info">
            <div class="info-item">
              <span>承运商名称：</span> {{ baseInfo.companyName }}
            </div>
            <div class="info-item">
              <span>是否认证：</span> {{ baseInfo.isApproved == '1' ? '是' : '否' }}
            </div>
            <div class="info-item">
              <span>联系方式：</span> {{ baseInfo.phoneNumber }}
            </div>
            <div class="info-item-row">
              <span>始发地：</span> {{fomatterAdressName(baseInfo.startProvince) }} / {{ fomatterAdressName(baseInfo.startCity) }}
            </div>
            <div class="info-item-row">
              <span>目的地：</span> {{fomatterAdressName(baseInfo.endProvince) }} / {{ fomatterAdressName(baseInfo.endCity) }}
            </div>
            <div class="info-item">
              <span>运车车型：</span> {{forrmatterEnmu(Enmu.carType, baseInfo.vehicleType)}}
            </div>
            <div class="info-item">
              <span>途径城市：</span>
              {{ baseInfo.hasTransitCities == 0 ? '无' : baseInfo.transitCities }}
            </div>
            <div class="info-item">
              <span>预计开始运输时间：</span>{{baseInfo.expectedStartTime }}
            </div>
            <div class="info-item">
              <span>预计到达时间：</span> {{baseInfo.expectedArrivalTime }}
            </div>
            <div class="info-item">
              <span>预计最低价：</span>{{baseInfo.expectedMinPrice }}元
            </div>
            <div class="info-item">
              <span>预计最高价：</span> {{ baseInfo.expectedMaxPrice }}元
            </div>
          </div>

           <div class="other-info">
             <div class="info-table">
                <div class="info-title">联系信息</div>
                 <!-- 联系信息 -->
                <el-table :data="linkList">
                    <el-table-column label="联系人" align="center" prop="callerName"></el-table-column>
                    <el-table-column label="拨打时间" align="center" prop="callTime"></el-table-column>
                    <el-table-column label="联系次数(次)" align="center"  width="120" prop="callCount"></el-table-column>
                </el-table>
                <pagination
                  v-show="linkPageInfo.total>0"
                  :total="linkPageInfo.total"
                  :page.sync="linkPageInfo.pageNum"
                  :limit.sync="linkPageInfo.pageSize"
                  @pagination="getLogs"
                />
             </div>
           </div>
        </div>

      </el-dialog>
    </div>
  </template>
  
  <script>
  import Enmu from "../../../../utils/enmu";
  import { findGoodList, getQuoteList, getLogList } from "@/api/crm/transport";
  import {forrmatterEnmu} from "@/utils/index"
  import ProviceSelect from "@/components/ProviceSelect/index.vue"
  import {mapGetters} from "vuex"
  export default {
    name: "Tag",
    data() {
      return {
        provinces: [],
        cityslist: [],
        queryCitys: [],
        queryRegions: [],
        queryCitysAim: [],
        queryRegionsAim: [],
        Enmu,
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 标签管理表格数据
        tagList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
            pageSize: 10,
          status: '',
          startProvince: '',
          startCity: '',
          endProvince: '',
          endCity: '',
          vehicleType: '',
          startTime: '',
          endTime: '',
          companyName: ''
        },
        // 报价列表
        quotationList: [],
        linkList: [],
        linkPageInfo: {
          total: 0,
          pageSize: 10,
          pageNum: 1
        },
        baseInfo: {}
      };
    },
    created() {
      this.getList();
    },
    computed: {
      ...mapGetters(['allCityList'])
    },
    components: {ProviceSelect},
    methods: {
        forrmatterEnmu,
         // 省市区转换成中文
        fomatterAdressName(code) {
          let index = this.allCityList.findIndex(ele => ele.id == code);
          return index > -1 ? this.allCityList[index].cityName : code;
        },
        queryStartChangeValue(values) {
          this.queryParams.startProvince = values[0]
          this.queryParams.startCity = values[1]
        },
        queryEndChangeValue(values) {
          this.queryParams.endProvince = values[0]
          this.queryParams.endCity = values[1]
        },
        // 查询报价
        queryQuotation(row) {
            this.open = true;
            this.title = "查看详情";
            getQuoteList({demandId: row.id}).then(res => {
                this.quotationList = res.data;
            })
            this.baseInfo = {...row}
            this.getLogs(row);
        },
         // 查询联系列表
         getLogs(row) {
          getLogList({
            callType: 2,
            goodDemandId: row.id,
            pageNum: this.linkPageInfo.pageNum,
            pageSize: this.linkPageInfo.pageSize
          }).then(res => {
                this.linkList = res.rows;
          })
        },
      /** 查询标签管理列表 */
      getList() {
        this.loading = true;
        findGoodList(this.queryParams).then(response => {
          this.tagList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .info-content {
    font-size: 14px;
    .base-info {
      display: flex;
      flex-wrap: wrap;
      width: 800px;
    }
    .info-item {
      width: 30%;
      flex: 0 0 30%;
      margin-bottom: 15px;
      span {
        font-weight: 600;
      }
    }
    .info-item-row {
      width: 45%;
      flex: 0 0 45%;
      margin-bottom: 15px;
      span {
        font-weight: 600;
      }
    }
  }
  .other-info {
    margin-top: 30px;
    .info-table {
      margin-left: 30px;
      &:first-of-type {
        margin-left: 0;
      }
    }
  }
  .info-title {
    font-size: 18px;
    margin-bottom: 5px;
    &::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 15px;
      background: #1777FF;
      border-radius: 3px;
      margin-right: 8px;
    }
  }
  </style>
    
  